<template>
	<view class="container">
		<view class="intro">
			<image src="/static/images/logo.png"></image>
			<view class="tips">
				一杯咖啡，一本书
				<br>
				在喧嚣中静静生长，与朋友共享时光
			</view>
		</view>
		<view class="bottom">
				<button type="primary" size="default" class="login-btn" @tap="GetMyInfo">
					<image src="/static/images/mine/wechat.png"></image>
					微信一键登录
				</button>
			<view class="d-flex flex-column justify-content-evenly align-items-center text-center" style="height: 30vh;">
				<!-- <view class="w-100 font-size-base text-color-assist">新用户登录即加入philo公社，享会员权益</view> -->
				<view class="w-100 row d-flex just-content-around align-items-center font-size-sm text-color-assist">
					<view class="grid">
						<image src="/static/images/mine/rhyl.png"></image>
						<view>图书借阅</view>
					</view>
					<view class="grid">
						<image src="/static/images/mine/jfdh.png"></image>
						<view>活动分享</view>
					</view>
					<view class="grid">
						<image src="/static/images/mine/srtq.png"></image>
						<view>生日特权</view>
					</view>
					<view class="grid">
						<image src="/static/images/mine/nxbz.png"></image>
						<view>更多宝藏</view>
					</view>
				</view>
				<view class="font-size-base text-color-primary">philo小世界，静待美好</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Member from '@/api/member'
	import {mapMutations,mapState} from 'vuex'
	import $http from '@/common/api/request.js'
	import getDateTime from '@/common/getdateTime.js'; 
	export default {
		data() {
			return {
				nowTime: '',
				defaultName:'',
				MyOpenId:'',
				form:{
						nickname: '',
						avatar: '/static/images/mine/default.png',
						gender: 0,
						openid:'',
						registertime:''
						
					}
				}
			},
		computed: {
			...mapState(['myOpenId'])
		},
		methods: {
			...mapMutations(['SET_MEMBER','SET_MY_OPENID']),
			async GetMyInfo() {
				var that=this;
				// 获得当前操作用户的openid
				uni.login({
				        provider: "weixin",
				        success: function (res) {
				          let appid = "wx8c2a1c48d0908e64";
				          let secret = "2b7c7a2e66398abdfd8e706955f1da28";
				          let url =
				            "https://api.weixin.qq.com/sns/jscode2session?appid=" +
				            appid +
				            "&secret=" +
				            secret +
				            "&js_code=" +
				            res.code +
				            "&grant_type=authorization_code";
				          uni.request({
				            url: url, // 请求路径
				            success: (r) => {
				              console.log("r", r);
				              console.info("用户的openId", r.data.openid);
							  this.MyOpenId =  r.data.openid
							  that.SET_MY_OPENID(this.MyOpenId)
							  console.log("vuex里的this.myOpenId：88：", this.myOpenId);
				            },
				          });
				        },
				});
				
				console.log("本地存储this.myOpenId：：getSxztorageSync：", uni.getStorageSync('myOpenId'));
				console.log("这个页面里的变量this.MyOpenId：", this.MyOpenId);
				//查询数据库里有没有这个openid
				$http.request({
					 url:"/wechat-user/"+uni.getStorageSync('myOpenId')
				}).then((res)=>{
					console.log("小刘又进一步", res)
					// 有的话，调出用户信息， 给state。member赋值，需要登录的其他页面就能用了Object.keys(state.member).length
					if(res.data.length !== 0){
						console.log("小刘又进2步", res.data[0])
						const {uid:id,avatar,birthday, gender, mobilephone,nickname, openid:openId,registertime} = res.data[0]
						const member = Object.assign(Member,  {id,avatar,birthday, gender, mobilephone,nickname, openid:openId,registertime})
					// 	//给member赋值+数据持久化
						this.SET_MEMBER(member)
						 console.log("用户一开始就在数据库", res);
						 uni.navigateBack()
					} else {
						// 如果没有,新建一条数据插入用户表,重新调数据,赋给state.number
						// 新建默认的用户名
						var randNum = Math.floor(Math.random() * (99999 - 10000 + 1)) + 10000
						this.defaultName = "默认用户"+randNum.toString()
						console.log("默认用户名l类型为：", typeof(defaultName));
						console.log("默认用户名为：", this.defaultName);
						var timeStr = getDateTime.dateTimeStr('y-m-d h:i:s'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
						this.nowTime = timeStr
						console.log("获取当前时间：");
						console.log(this.nowTime);
						this.form.nickname = this.defaultName;
						this.form.openid = uni.getStorageSync('myOpenId');
						this.form.registertime = this.nowTime;
						var that=this;
						console.log("即将插入的新建用户信息为：",this.form)
						
							$http.request({
									url:"/wechat-user/add",
									method:"POST",
									data:that.form
								}).then((res)=>{
									console.log("that.form为",that.form);
									console.log("插入数据后，查询新插入的数据并进行登录");
									console.log(res);
										$http.request({
											 url:"/wechat-user/"+uni.getStorageSync('myOpenId')	
										}).then((res)=>{
											// 有的话，调出用户信息， 给state。member赋值，需要登录的其他页面就能用了Object.keys(state.member).length
											if(res.length !== 0){
												console.log("小刘又进2步", res.data[0])
												const {uid:id,avatar,birthday, gender, mobilephone,nickname, openid:openId,registertime} = res.data[0]
												const member = Object.assign(Member,  {id,avatar,birthday, gender, mobilephone,nickname, openid:openId,registertime})
											// 	//给member赋值+数据持久化
												that.SET_MEMBER(member)
												 console.log("新注册的用户登录", res)
												 uni.navigateBack()
											}
											else{
												uni.showToast({
													title:'请求失败，请重新登录',
													icon:'none'
												})
												uni.navigateBack()
											}
										}).catch(()=>{
											uni.showToast({
												title:'请求失败，请重新登录',
												icon:'none'
											})
										})
									})
					}//else end
					// uni.navigateBack()
				}).catch(()=>{
					  uni.showToast({
						title:'请求失败',
						icon:'none'
					  })
				})
			}//GetMyInfo end
			
		}
	}
</script>

<style lang="scss" scoped>
	.intro {
		width: 100%;
		height: 60vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		font-size: $font-size-base;
		color: $text-color-assist;
		
		image {
			width: 165rpx;
			height: 165rpx;
		}
		
		.tips {
			line-height: 72rpx;
			text-align: center;
		}
	}
	
	.bottom {
		height: 40vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 40rpx;
		
		.login-btn {
			width: 100%;
			border-radius: 50rem !important;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
			
			image {
				width: 36rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
		
		.row {
			.grid {
				width: 20%;
				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>